<template>
  <div class="history-container">
    <div class="tabs">
      <ul class="tab-tilte">
        <li v-for="(itemTit, index) in tabTitle" :key="itemTit" @mouseover="handleMouseOver(index)" @mouseout="handleMouseOut(index)" :class="{active: cur == index}">
          {{ itemTit }}
        </li>
      </ul>
      <div class="indicatorDots">
        <span :class="{active: cur == i}" v-for="(v, i) in tabTitle" :key="i"></span>
      </div>
      <div class="tab-content">
        <div v-for="(itemCon, index) in tabCon" v-show="cur == index" :key="index">
          <div v-for="(v, i) in itemCon" :key="i" class="content">
            {{ v }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "growthModel",
  data() {
    return {
      timer: null,
      tabTitle: [
        //dataTitle ||
        "幼苗期",
        "幼树期",
        "幼果期",
        "盛果期",
        "春芽肥期",
        "壮果肥期",
        "采果肥期",
      ],
      tabCon: [
        //  dataCon ||
        [
          "2-3月",
          "1.清除杂草。",
          "2.幼苗浇水（四五天一次）。",
          "3.施肥量为全年总施肥量的25%（施肥要在种植一个月成活以后）。",
        ],
        [
          "5-6月",
          "施加稳果肥，并追加氮肥、钾肥，还可以施加叶肥，施肥量为全年总施肥量的5%",
        ],
        [
          "7月",
          "1.定植后首先要剪裁纤细枝干，另外注意最少保留 40 cm 。",
          "2.要施加壮果肥，追加氮肥、钾肥，满足脐橙果实生长的营养需求，施肥量占全年总施肥量的 35% 。",
        ],
        [
          "11-12月",
          "果皮由青色变成橙红色时即可采收。",
          "采摘时按从外到内、从上到下的顺序连同果柄一起剪下。",
          "剪齐果蒂剪去果梗，不要剪伤果蒂萼片，且轻拿轻放。",
        ],
        [
          "脐橙在种植的时候，间距一般为3米X2.5米或4米X3米，田与田之间保持3米左右的行距，每亩大概种110-120株左右。",
          "脐橙也叫甜橙脐橙的营养丰富，含有人类所需要的各类影响成分。",
          "脐橙的种植，分为选种、整地种植、间苗除草、水肥管理、修剪枝叶等五个阶段。",
        ],
        [
          "赣南脐橙行业商城一直秉承着“新鲜天然、生态健康”的理念",
          "互联网+赣南脐橙”的创新模式是整个行业转型的方向。",
          "借助大数据、云计算、物联网等技术，充分整合市场资源，线上线下融合互通。",
        ],
        [
          "2021.12.16，赣南脐橙走进欧盟驻华代表团、走进军营”活动在京举行。",
          "赣南脐橙荣获“中华名果”、“国优产品”、国家地理标志保护产品等称号，品牌价值达681.85亿元。",
          "脐橙成为赣州名副其实的农业“当家树”、农村“致富树”和农民“摇钱树”。",
        ],
      ],
      cur: 0, //默认选中第一个tab
    };
  },
  computed: {
    dataPageData() {
      return this.$store.state.dataPageData;
    },
  },
  watch: {
    dataPageData: {
      immediate: true,
      deep: true,
      handler(res) {
        if (res) {
          // 看数据格式再填入参数
          // this.dataTitle = res.title;
          // this.dataCon = res.con;
        }
      },
    },
  },
  mounted() {
    this.getTimer();
  },
  methods: {
    getTimer() {
      this.timer = setInterval(() => {
        this.cur++;
        if (this.cur == this.tabTitle.length) {
          this.cur = 0;
        }
      }, 300000);
    },
    handleMouseOver(index) {
      this.cur = index;
      clearInterval(this.timer);
    },
    handleMouseOut(index) {
      this.getTimer();
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
.history-container {
  margin: 0 0.125rem;
  .tabs {
    display: flex;
    .tab-tilte {
      li {
        color: #fff;
        background-color: rgba(36, 196, 255, 0.5);
        text-align: center;
        cursor: pointer;
        font-size: 0.125rem;
        width: 1rem;
        height: 0.3rem;
        line-height: 0.3rem;
        margin-bottom: 0.16rem;
        -webkit-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        &.active {
          background: linear-gradient(to right, #1b81bc, 20%, #24c4ff);
          color: #fff;
        }
      }
    }
    .indicatorDots {
      background-color: rgba(36, 196, 255, 0.5);
      width: 1px;
      height: 2.8rem;
      margin: 0.0625rem 0 0 0.375rem;
      span {
        display: block;
        height: 0.46rem;
        margin-left: -0.0875rem;
        &:after {
          content: "";
          display: block;
          width: 0.125rem;
          height: 0.125rem;
          background: #ddd;
          -webkit-border-radius: 50%;
          -ms-border-radius: 50%;
          -o-border-radius: 50%;
          -moz-border-radius: 50%;
          border-radius: 50%;
          border: 2px solid #1b81bc;
        }
        &.active {
          &:after {
            background: #24c4ff;
            -webkit-box-shadow: 0 0 0.125rem #1b81bc;
            box-shadow: 0 0 0.125rem #1b81bc;
          }
        }
      }
    }
    .tab-content {
      display: flex;
      align-items: center;
      div {
        margin-left: 0.1875rem;
        color: #fff;
        .content {
          font-size: 0.175rem;
          line-height: 0.275rem;
          padding: 0.1rem 0;
        }
      }
    }
  }
}
</style>
